<template>
    <Modal v-model="modal" :width="800" title="商品分类配置" @on-ok="ok" @on-cancel="cancel">
        <div class="my-aera">
            <div class="left-show">
                <Tabs :value="curWebId" @on-click="handleTabClick">
                    <TabPane :label="item.title" :name="item.webFromeId" v-for="(item, index) of titleWay"
                        :key="item.webFromeId">
                    </TabPane>
                </Tabs>
                <div class="good-show-area">
                    <draggable class="good-show-area" :list="listWay" :move="handleMove" v-bind="{
                        sort: true,
                        ghostClass: 'ghost',
                    }">
                        <li class="good-item" v-for="(item, index) of listWay" :key="item.webFromeId"
                            v-if="item.typeId === curWebId">
                            <div class="goods-img">
                                <Icon type="md-close-circle" class="goods-icon" @click="handleRemoveGood(item)"/>
                                <img :src="item.img" :draggable="false" />
                            </div>
                            <div class="goods-desc">
                                <div class="goods-title"> {{ item.title }} </div>
                                <div class="goods-bottom">
                                    <div class="goods-price">{{ item.price }}</div>
                                </div>
                            </div>
                            
                        </li>
                    </draggable>
                </div>
            </div>
            <div class="right-show">
                <div :name="item.webFromeId" v-for="(item, index) of titleWay" v-if="item.webFromeId === curWebId"
                    :key="item.webFromeId">
                    <div class="operate-area">
                        <Button size="small" type="primary" @click="liliDialogFlag(true)">新增商品</Button>
                    </div>
                    <div class="input-area">
                        <div class="label">
                            标题:
                        </div>
                        <Input class="input-item" v-model="item.title" placeholder="请输入标题" style="width: 300px" @on-change="handleTitleChange(item)"/>
                    </div>
                    <div class="input-area">
                        <div class="label">
                            描述: 
                        </div>
                        <Input class="input-item" v-model="item.desc" placeholder="请输入描述" style="width: 300px" />
                    </div>
                    <div v-if="item.bindCategory">
                        绑定分类为：{{ item.bindCategory.name }}
                    </div>
                </div>
            </div>
        </div>
        
        <liliDialog
            ref="liliDialog"
            @selectedLink="selectedLink"
            @selectedGoodsData="selectedGoodsData"
        ></liliDialog>
    </Modal>
</template>

<script>
import { v4 as uuidv4 } from 'uuid';
import Draggable from "vuedraggable";

export default {
    mixins: [],
    components: {
        Draggable,
    },
    props: {

    },
    data() {
        return {
            modal: false,
            titleWay: [],
            listWay: [],
            curWebId: '',
            enableSelectCategory: false,
            typeIndexMap: {}
        }
    },
    methods: {
        // 选择分类
        confirmCategory(val) {
            let curTitleWayObj = this.titleWay.find(item=>{
                return item.webFromeId === this.curWebId
            })
            if(!curTitleWayObj) {
                return
            }
            let data = {
                ...curTitleWayObj
            };
            let callback = {
                id: val[0].id,
                name: val[0].name,
                categoryIdWay: val[0].id,
            };
            data = {
                ...data,
                bindCategory: callback,
            };
            // this.res.options.list[0].listWay =
            // this.res.options.list[0].listWay.filter((item) => {
            //     return item.___index != this.goodsSelectedIndex;
            // });
            this.titleWay.forEach(item=>{
                if(item.webFromeId === this.curWebId) {
                    item.bindCategory = callback
                }
            })
            // this.res.options.list[0].titleWay[this.goodsSelectedIndex] = data;

            console.log(this.res.options.list[0]);
        },
        // 绑定分类
        bindGoodsCategory() {
            this.enableSelectCategory = true;
        },
        handleTitleChange(item) {
            this.listWay.forEach(sitem=>{
                if(sitem.typeId === item.webFromeId) {
                    sitem.type = item.title
                }
            })
        },
        // 打开图片选择器
        liliDialogFlag(flag) {
            this.$refs.liliDialog.goodsFlag = flag;
            this.$refs.liliDialog.flag = true;
        },
        selectedGoodsData(val) {
            if (!val) return false;
            let curTitleWayObj = this.titleWay.find(item=>{
                return item.webFromeId === this.curWebId
            })
            if(!curTitleWayObj) {
                return
            }
            let data = val.map((item, index) => {
                delete item.selected;
                delete item.intro;
                delete item.mobileIntro;
                return {
                    img: item.thumbnail,
                    title: item.goodsName,
                    type: curTitleWayObj.title,
                    ___index: this.typeIndexMap[this.curWebId],
                    webFromeId: uuidv4(),
                    typeId: this.curWebId,
                    order: this.listWay.length + (index+1),
                    ...item,
                };
            });
            this.listWay.push(...data);
            // // 清除已经绑定的分类
            this.titleWay.forEach(item=>{
                if(item.webFromeId === this.curWebId) {
                    item.bindCategory = ''
                }
            })
        },
        selectedLink(val) {

        },
        handleRemoveGood(item) {
            let newList = this.listWay.filter(fitem=>{
                return fitem.webFromeId !== item.webFromeId
            })
            this.listWay = newList
            this.$Message.success('删除成功!')
        },
        handleMove() {
            return true;
        },
        handleTabClick(val) {
            this.curWebId = val
        },
        show(cfgObj) {
            let curCfgObj = JSON.parse(JSON.stringify(cfgObj[0]))
            let { listWay = [], titleWay = [] } = curCfgObj
            let typeIdMap = {}
            let typeIndexMap = {}
            titleWay.forEach((item, index) => {
                let webFromeId = uuidv4()
                typeIdMap[item.title] = webFromeId
                typeIndexMap[item.title] = index
                item.webFromeId = webFromeId
            })
            listWay.forEach((item, index) => {
                let webFromeId = uuidv4()
                item.webFromeId = webFromeId
                item.typeId = typeIdMap[item.type],
                item.order = index + 1
            })
            this.curWebId = titleWay[0].webFromeId
            this.titleWay = titleWay
            this.listWay = listWay
            this.typeIndexMap = listWay
            this.modal = true
        },
        ok() {
            let newObj = {
                listWay: this.listWay,
                titleWay: this.titleWay
            }
            this.$emit('setData', newObj)
            this.modal = false
        },
        cancel() {
            this.modal = false
            this.$Message.info('Clicked cancel');
        }
    },
    mounted() {

    },
    created() {

    }
}
</script>

<style lang="scss" scoped>
.my-aera {
    display: flex;

    .left-show {
        width: 390px;
    }

    .right-show {
        width: 280px;
        padding-left: 10px;
    }
}

.good-show-area {
    height: 600px;
    width: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    background: #e8e8e8;
    padding: 5px 0;

    .good-item {
        width: 150px;
        background: #fff;
        height: 220px;
        border-radius: 5px;
        margin: 5px 4px;

        .goods-img {
            position: relative;
            margin: 0 auto;
            width: 100%;
            height: 150px;
            border-top-left-radius: 0.4em;
            border-top-right-radius: 0.4em;
            overflow: hidden;

            .goods-icon {
                font-size: 20px;
                color: rgb(225, 37, 27);
                right: 5px;
                top: 5px;
                position: absolute;
                cursor: pointer;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }
        .goods-desc{
            border-bottom-left-radius: 0.4em;
            border-bottom-right-radius: 0.4em;
            width: 100%;
            background: #fff;
            padding: 4px;
            margin: 0 auto;
            .goods-title{
                font-size: 12px;
                height: 38px;
                display: -webkit-box;
                font-weight: 500;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            .goods-bottom{
                display: flex;
                .goods-price{
                    line-height: 2;
                    color: #FF5C58;
                }
            }
        }
    }
}
.input-area{
    display: flex;
    align-items: center;
    margin: 10px 0px 10px 20px;
    .label {
        width: 60px;
    }
    .input-item{
        width: 50px;
    }
}
.operate-area{
    display: flex;
    >*{
        margin-right: 10px;
    }
}

</style>